page {
  background: #f5f5f5;
}

.top {
  height: 320rpx;
  .banner {
    width: 100%;
    height: 100%;
  }
}

.nav-box {
  background: #fff;
  padding: 0 40rpx;
  box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.09);
}

wux-grids wux-grid {
  image {
    width: 90rpx !important;
    height: 90rpx !important;  
    margin-bottom: 16rpx;
  }
  .wux-grid__inner {
    padding-top: 30rpx;
    padding-bottom: 30rpx;
    .wux-grid__label {
      color: #4a4a4a;
    }
  }
  // &:nth-child(1) image {
  //   width: 80rpx;
  //   height: 60rpx;
  //   margin-bottom: 10rpx;
  // }
  // &:nth-child(2) image {
  //   width: 80rpx;
  //   height: 62rpx;
  //   margin-bottom: 10rpx;
  // }
  // //&:nth-child(3) image {
  // //  width: 80rpx;
  // //  height: 62rpx;
  // //  margin-bottom: 10rpx;
  // //}
  // &:nth-child(3) image {
  //   width: 90rpx;
  //   height: 62rpx;
  //   margin-bottom: 10rpx;
  // }
  // &:nth-child(4) image {
  //   width: 65rpx;
  //   height: 63rpx;
  //   margin-bottom: 10rpx;
  // }
}

.title-box {
  display: flex;
  justify-content: space-between;
  padding-right: 40rpx;

  .title {
    color: #4a4a4a;
    font-size: 36rpx;
    margin-left: 68rpx;
    font-weight: bold;
    position: relative;
    &:after {
      position: absolute;
      top: 8rpx;
      left: -30rpx;
      display: inline-block;
      content: '';
      width: 8rpx; 
      height: 34rpx;
      border-radius: 4rpx;
      background: #E0B799;
    }
  }
}

.more-info {
  color: #757575;
  font-size: 24rpx;
  line-height: 50rpx;
}

.hot-course {
  background: #fff;
  padding: 40rpx 0 20rpx 0;
  .title-box .title:after {
    background: #FF8473;
  }
  .course-box {
    padding: 0 40rpx;
    margin-top: 40rpx;
    .course {
      margin-bottom: 40rpx;
      box-shadow: 0 0 12rpx 0 rgba(0,0,0,0.1);
      border-radius: 16rpx;
      position: relative;
      padding: 60rpx 20rpx 40rpx 20rpx;

      .tag {
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 0 16rpx 0 16rpx;
        color: #fff;
        display: inline-block;
        font-size: 24rpx;
        font-weight: normal;
        padding: 0 20rpx;
        line-height: 40rpx;
        &.primary {
          color: #14CC76;
          background:rgba(20,204,118,0.1);
        }
        &.junior {
          color: #FFBA00;
          background: rgba(255, 186, 0,0.1);
        }
        &.senior {
          color: #FE7141;
          background: rgba(254, 113, 65,0.1);
        }
      }

      .base-info {
        font-size: 28rpx;
        .curriculum-name {
          font-size: 32rpx;
          height: 106rpx;
          max-height: 80rpx;
          // margin-bottom: 20rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          color: #4a4a4a;
          font-weight: bold;
        }
        .school-name {
          font-size: 28rpx;
          margin-top: 16rpx;
          color: #14CC76;
          font-weight: 400;
        }
        .other {
          margin-top: 40rpx;
          font-size: 24rpx;
          color: #757575;
          justify-content: space-between;
          .teachers {
            align-content: flex-start;
            .teacher {
              text-align: center;
              .avatar {
                width: 48rpx;
                height: 48rpx;
                border-radius: 100%;
              }
              .name {
                color: #9B9B9B;
                display: inline-block;
                width: 110rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 24rpx;
              }
            }
          }
          .price {
            color: #ff3b30;
            font-size: 40rpx;
            text-align: right;
          }
          .limited {
            color: #FF1E32;
            font-size: 24rpx;
            margin-right: 12rpx;
          }
          .joined-num {
            color: #9B9B9B;
            font-size: 24rpx;
          }
        }
      }
    }
  }
}

.zhibo-course {
  padding: 40rpx;
  background: #fff;
  .tab-h {
    margin: 40rpx 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    font-size: 16px;
    white-space: nowrap;
  }
  .tab-item {
    width: 300rpx;
    margin-right: 30rpx;
    display: inline-block;
    .cover {
      border-radius: 16rpx;
      width: 100%;
      height: 180rpx;
    }
    .course-name {
      margin-top: 14rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #4a4a4a;
      font-size: 24rpx;
      font-weight: bold;
    }
  }
}

.famous-teacher {
  background: #fff;
  padding: 40rpx 0 30rpx 0;
  .title-box .title:after {
    background: #FFBA00;
  }
  .teacher-box {
    padding: 0 40rpx;
    margin-top: 40rpx;
    .teacher {
      margin-bottom: 40rpx;
      .cover {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-top: 5rpx;
      }
      .base-info {
        padding-top: 8rpx;
        width: 490rpx;
        margin-left: 30rpx;
        font-size: 24rpx;
        .name {
          color: #4a4a4a;
          font-weight: bold;
          font-size: 32rpx;
          align-content: flex-start;

          .tag {
            margin-left: 20rpx;
            border-radius: 0 16rpx 0 16rpx;
            color: #fff;
            display: inline-block;
            font-size: 24rpx;
            font-weight: normal;
            padding: 0 20rpx;
            line-height: 40rpx;
            &.primary {
              color: #14CC76;
              background:rgba(20,204,118,0.1);
            }
            &.junior {
              color: #FFBA00;
              background: rgba(255, 186, 0,0.1);
            }
            &.senior {
              color: #FE7141;
              background: rgba(254, 113, 65,0.1);
            }
          }
        }
        .school-name {
          margin-top: 16rpx;
          color: #757575;
          font-weight: 400;
          font-size: 28rpx;
        }
        .age {
          margin-top: 16rpx;
          font-size: 28rpx;
          color: #757575;
          font-weight: 400;
        }
        .other {
          max-height: 68rpx;
          margin-top: 20rpx;
          color: #9b9b9b;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
}

.institutions {
  background: #fff;
  padding: 40rpx 0 0 0;
  
  .institution-box {
    flex-wrap: wrap;
    margin: 40rpx 10rpx 0 40rpx;
    .institution {
      box-sizing: border-box;
      min-width: 320rpx;
      max-width: 320rpx;
      height: 200rpx;
      border-radius: 16rpx;
      margin: 0 30rpx 40rpx 0;
      color: #4a4a4a;
      border: 2rpx solid #EFEFEF;
      overflow: hidden;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
      padding-top: 20rpx;
      position: relative;
      .logo {
        width: 100rpx;
        height: 100rpx;
      }
      .school-name {
        font-size: 28rpx;
        max-height: 40rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .stage {
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 0 16rpx 0 16rpx;
        color: #fff;
        display: inline-block;
        font-size: 24rpx;
        font-weight: normal;
        padding: 0 20rpx;
        &.primary-school {
          color: #14CC76;
          background:rgba(20,204,118,0.1);
        }
        &.junior-school {
          color: #FFBA00;
          background: rgba(255, 186, 0,0.1);
        }
        &.senior-school {
          color: #FE7141;
          background: rgba(254, 113, 65,0.1);
        }
        &.mixed {
          color: #278EFF;
          background: rgba(39, 142, 255,0.1);
        }
        .other {
          max-height: 68rpx;
          margin-top: 20rpx;
          color: #9b9b9b;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}

// button样式重置
.xhzx-form-button {
  color: inherit;
  line-height: auto;
  font-size: inherit;
  text-align: inherit;
}

